﻿<html>
<head>
<title>层次选择器</title>
<style type="text/css">
    div
    {
        border:thin solid black;
		background-color:Silver;
    }
	.One{
		Width:300px;
		Height:300px;
	}
	.Middle{
		Width:200px;
		Height:100px;
	}
	.Small{
		Width:100;
		Height:25px;
	}
</style>
<script type="text/javascript" src="jquery-1.5.js"></script>

<script type="text/javascript">
    $().ready(function () {

        // 后代选择器$(ancestor descendant) 
        $("#Button1").click(function () {
            $("#One div").css("backgroundColor", "blue");
        });

        // 子代选择器$(parent > child) 
        $("#Button2").click(function () {
            $("#One > div").css("backgroundColor", "green");
        });


        // $(prev + next) 选取紧接在prev后的next元素。
        $("#Button3").click(function () {
            $(".Middle + div").css("backgroundColor", "yellow");
        });
        // 等价于：$(".Middle").next("div");
        $("#Button5").click(function () {
            $(".Middle").next("div").css("backgroundColor", "yellow");
        });




        // $(prev ~ siblings) 选取prev元素之后的所有siblings兄弟元素。
        $("#Button4").click(function () {
            $(".Middle ~ div").css("backgroundColor", "orange");
        });
        // 等价于：$(".Middle").nextAll("div");
        $("#Button6").click(function () {
            $(".Middle").nextAll("div").css("backgroundColor", "orange");
        });

        // 选取所有同辈元素，无论先后顺序
        $("#Button7").click(function () {
            $("#id1").siblings("div").css("backgroundColor", "pink");
        });

        // reset
        $("#btnReset").click(function () {
            $("*").css("backgroundColor", "white");
            $("div").css("backgroundColor", "Silver");
        });

    })
</script>
</head>

<body>
    <div class="One" id="One">
		class是One。
		<div class="Middle">
            class是Middle
		    <div class="Small">class是Small</div>
        </div>
        <div style="width:200px" id="id1">我是id1</div>
        <div class="Middle">
            class是Middle
		    <div class="Small">class是Small</div>
        </div>
        <label>....</label>
        <div style="width:100px">我是div</div>
	</div>

    <input type="button" id="Button1" value="后代选择器" />
    <input type="button" id="Button2" value="子代选择器" />
    <br />
    <input type="button" id="Button3" value="prev + next" />=<input type="button" id="Button5" value="等价" />
    <input type="button" id="Button4" value="prev ~ siblings" />=<input type="button" id="Button6" value="等价" />
    <input type="button" id="Button7" value="id1的所有同辈元素"/>
    <br />
    <input type="button" id="btnReset" value="Reset"/>
</body>
</html>